<!--
File Created: 2018-01-29 15:06
Author: xxq (you@you.you)
__________________________________________________
Last Modified: 2018-02-01 16:06:50
Modified By: xxq (you@you.you>)
__________________________________________________
Copyright - 2018 xnb, xnb
-->
<!--
File Created: 2018-01-19 16:41
Author: xxq (you@you.you)
__________________________________________________
Last Modified: 2018-01-19 17:23:25
Modified By: xxq (you@you.you>)
__________________________________________________
Copyright - 2018 xnb, xnb
-->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/colresizable@1.6.0/colResizable-1.6.min.js"></script> <!-- 拖动调整列宽 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/resizable/bootstrap-table-resizable.min.js"></script>

<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>


<!—如果想使用中文版也可以引入以下语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<style>
	th, td{text-align: center}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{vertical-align: middle}
</style>
</head>

<body>
<div class='container'>
<h1>鼠标拖动调节列的宽 / 固定表头 / 服务端分页</h1>
<table id="table" class="table table-hover" style="width: 100%;">
	<thead>
		<tr>
		<th >商品名称</th>
		<th >单价含运费(元)</th>
		<th >实际售价（元）</th>
		<th >数量</th>
		<th >商品规格</th>
		<th >订单总价(元)</th>
		<th >支付方式</th>
		<th >运费（元）</th>
		<th >打印状态</th>
		<th >订单备注</th>
		<th >交易状态</th>
		</tr>   
	</thead>
	<tbody></tbody>
</table>



</div>
<script type="module">
	import { fetchData, requiredParams} from './public.js'
	
	$(function(){
		fetchData('user/login.do', {loginName:'18812345678', password: '123456' }, res => {
			/* 接口返回示例
				{
					code: 200,
					msg: "ok",
					sessionkey: "vvKLsfB4sa6X00mhUZBe"        
				} 
			*/
		})
		
		initTable()
		function initTable() {
			fetchData('order/orderList.do', null, res => {
				var html = '';
				
				for(var order of res.data.data) {
					html += '<tr><td colspan="13" class="text-left"  style="border-top: 10px solid #EBEBEB;">';
					html += '<span style="margin-left: 20px">订单号：' + order.code + '</span>'
					html += '<span style="margin-left: 20px">订单时间：' + order.date + '</span>'
					html += '<span style="margin-left: 20px">下单人：' + order.operatorName + (order.operatorPhone?'('+ order.operatorPhone+')':"")+'</span> ';
					html += '<span style="margin-left: 20px">客户：' + order.userName + (order.userPhone?'('+ order.userPhone+')':"") +'</span> ';
					html += '<span style="margin-left: 20px">当前审核人：' + order.reviewNames +'</span> ';
					html += '</td></tr>';
					
					$.each(order.specList, function (i, proinfo) {
						html += '<tr>';
						html += '<td><a  class="J_menuItem" title="商品详情" href="uzhi/order/goodsdetail.html?goodsid=' + proinfo.goodsId + '">' +
							'<p><img src=' + proinfo.logoUrl + ' height="100" width="100" alt=""/></p>' +
							'<span>' + proinfo.goodsName + '</span></a></td>';
						html += '<td>' + proinfo.price + '</td>';
						html += '<td>' + proinfo.actualPrice + '</td>';
						html += '<td>' + proinfo.number + proinfo.unitStr + '</td>';
						html += '<td> 规格:' + proinfo.goodSpecDesc + '</td>';
						if (i == "0") {
							
							html += '<td rowspan="' + order.specList.length + '">';
							html += '' + order.amount + '元(含运费)';
							html += '</td>';
							//添加支付方式一列
							if (order.payMethod == 1) {//余额支付
								html += '<td rowspan="' + order.specList.length + '">' +
									'<p>余额支付</p>' +
									'<p>余额:' + order.balance + '</p>' +
									'</td>';
							} else if (order.payMethod == 2) {//线下转账
								if (order.isProofUpload) {//已上传凭证 2017年10月19日 09:15:34 shuaig
									var transferPicArr=[];//临时存放凭证图片
									if(order.voucherIdList&&order.voucherIdList.length>0){
											for(var t=0; t<order.voucherIdList.length; t++){
												transferPicArr.push(order.voucherIdList[t]);
											}
									}
									html += '<td rowspan="' + order.specList.length + '">' +
										'<p>线下转账</p>' +
										'<a class="a-transfer" href="javascript:void(0);">转账凭证</a>' +
										'<input type="hidden" name="pic" value="'+transferPicArr+'">'
										'</td>';
								} else {
									html += '<td rowspan="' + order.specList.length + '">' +
										'<p>线下转账</p>' +
										'</td>';
								}
							} else if(order.payMethod == 3){//现金支付
								html += '<td rowspan="' + order.specList.length + '">' +
									'<p>现金支付</p>' +
									'</td>';
							} else {
								html += '<td rowspan="' + order.specList.length + '">' +
									'<p></p>' +
									'</td>';
							}
							html += '<td rowspan="' + order.specList.length + '">' + order.totalFreightFee + '</td>'; // 运费
							// 打印
							html += '<td rowspan="' + order.specList.length + '">' +
							'<a class=" J_menuItem" title="订单打印" href="uzhi/order/printorder.html?orderid=' + order.orderId + '">' 
							html += order.isPrint? '<p>已打印</p>':'<p>未打印</p>'
							html += '<p>' + order.printCount + '</p>' +'</a></td>';

							//备注
							html += '<td rowspan="' + order.specList.length + '">' + order.comments + '</td>';
						

							// 交易状态
							html += '<td rowspan="' + order.specList.length + '">';
							html += '<p>' + order.stateStr + '</p>';
							html += '<p><a class=" J_menuItem" title="订单详情" href="uzhi/order/orderdetail.html?orderid=' + order.orderId + '" >订单详情</a></p>';
							html += '<p><a class="showprogress" data-id="'+order.orderId+'">审核流程</a></p>';

							if( order.status != 2){
								// if (role.SYSTEM_ROLE_FINANCE != undefined || role.SYSTEM_ROLE_FINANCE_MANAGER != undefined) {
									if (order.state == 1 && order.payMethod > 1) {//确认收款 (线下转账和现金结算的待支付订单)
										html += '<a href="javascript:void(0)" class="btn btn-w-m btn-danger btn-outline " onclick="orderlist.confirmReceive(\'' + order.orderId + '\')">确认收款</a>';
									}
								// }
								if (order.state == 2 && order.showReview ) {//待审批
									html += '<button type="button" class="btn btn-danger btn-outline " onclick="orderlist.auditing(\'' + order.orderId + '\')">审批</button>';
								}
								if (order.state == 4 && order.showReview) {//待发货订单
									// html += '<a href="uzhi/order/delivergoods.html?orderid=' + order.orderId + '" class="btn btn-w-m btn-danger btn-outline J_menuItem" title="订单发货">发货</a>';
									html += '<a href="uzhi/inventorymanage/outwarehousemanage.html?orderCode=' + order.code + '" class="btn btn-danger btn-outline J_menuItem" title="出库管理">出库</a>';                            
								}
							}
							
							if (order.state == 5 && order.showReview) { //待签收订单
								html += '<a href="uzhi/order/delivergoods.html?orderid=' + order.orderId + '" class="btn btn-danger btn-outline J_menuItem" title="更新物流">更新物流</a>';
							}
							html += '</td>';

                    	}
                   		html += '</tr>';
					});
					
					// html = '</tr>';
				}
				$('#table tbody').html(html)
				$('#table').bootstrapTable({
					resizable:true,
					stickyHeader: true,
					stickyHeaderOffsetY: '0', // 默认为0
					pagination: true,
				})
			})
		}

		// setTimeout(function(){
			// $('#table').bootstrapTable({
		// 		resizable:true,
				// stickyHeader: true,
				// stickyHeaderOffsetY: '0px',
				// pagination: true,
			// })
		// }, 1000)

		function getParam() {
			const param = requiredParams()
			// param.time = 2018
			return param;
		}

	});
</script>
</body>
</html>